import { defineComponent } from 'vue';
import { ElButton } from 'element-plus';
import SvgIcon from '@/components/svg-icon';
import _ from 'lodash-es';
import $style from './index.module.scss';
import { useLayoutStore } from '@/store';

export default defineComponent({
    setup() {
        /**
         * @description 布局相关的 store
         * @type { object }
         */
        const layoutStore = useLayoutStore();

        const layoutList = [
            {
                key: 'left',
                svgIcon: 'layout-left-side',
                clickHandler: () => layoutStore.leftSize = 3
            },
            {
                key: 'right',
                svgIcon: 'layout-right-side',
                clickHandler: () => layoutStore.rightSize = 3
            }
        ];

        return () => (<div class={$style.bottomSide}>
            <section></section>
            {/* 布局 */}
            <section class={$style.layout}>
                {_.map(layoutList, item => <ElButton key={item.key} onClick={item.clickHandler}>
                    <SvgIcon name={item.svgIcon} />
                </ElButton>)}
            </section>
        </div>)
    }
})